<!--
*@Author:Sun
*@Date:2019-4-15
使用说明：
	<vdrop 
		:setDatas="textData" //循环数据源
		:pulltype=0          //列表渲染的样式 0单选 1多选
		:isbook="isSwiTch"  //状态值
		@updateEvent="updata" //触发事件
		>
	</vdrop>
 -->
<template>
	<div class="textdeom" ref="elememt2" id="elememt" @click.stop="btnpull" >
		<div class="textdeom-flex1"  :style="_getwidth()">
		 <div class="textdeom-isbook">
				<div v-if="pulltype==0" :title="sizeOnff(radionSize)">{{sizeOnff(radionSize)}}</div>
				<ul v-if="pulltype==1" class="textdeom-isbook-multiterm" >
					<li v-for="(item,key) in  setMultiterm" :key="key" v-if="setMultiterm.length" >
						<p @click.stop="delUser(item.mid)" ><span>{{item.title}}</span><a>X</a></p>
					</li>
				</ul>
				<span :class="{'textdeom-isbook-spanimg':isbook}"></span>
		 </div>
		 <div class="vdrop-commen" v-if="isshow">
			 	<!-- selexs -->
				<div class="vdrop-commen-selexs">
					<div class="vdrop-commen-ultop">
						<ul v-if="listArr.length">
							<li v-for="(item,key) in listArr" :key="key" :title="getName(item)" @click.stop="btnListArry(item,key)">
								<span :class="[btnchooke(item)]" v-show="pulltype" ></span>{{getName(item,1)}}
							</li>
						</ul>
						<div v-if="!listArr.length" class="vdrop-commen-lengh">没有相关的数据</div>
					</div>
				
					<ul class="vdrop-commen-bot" v-if="pulltype">
						<li class="vdrop-commen-bot-sp1" @click.stop="canOff()">取消</li>
						<li class="vdrop-commen-bot-sp2" @click.stop="conFirm()">确定</li>
					</ul>
				</div>
			 	<!-- title -->
				<div class="vdrop-commen-title">
					<div class="vdrop-commen-size">
						<input type="text" class="search-input"    @input="search" />
					</div>
					<div class="vdrop-commen-timg"></div>	
				</div>
				
		 </div>
	  </div>
		<!-- flex --> 
		<div class="vdrop-clone" @click.stop="clickEvent" v-if="isshow"></div> 
			 
	</div>

</template>

<script>
import {mapActions,mapState} from 'vuex'
import  {debounce} from '@/models/comm'
export default {
	name:"vdrop",
	props: {
		setDatas:{//数据
			type:[Array,Object],
			default:[]
		},
		pulltype:{//选择类型 0单选 1多选
			type:Number,	
			default:0
		},
		isbook:{//开关
			type:Boolean,
			default:false
		},
		value:{
			type:[String,Object,Array],
			default:""
		}
	},
	data(){
		return{
			ischooke:-1,//是否选中
			listArr:[],
			setDoems:[],
			isshow:false,
			radionSize:"",
			setMultiterm:[],//多选数据
			// isclone:false,
			txt:"下拉组件恩恩额indexvue"
		}
	},
	created () {
	
	},
	methods: {
		search(e){//触发搜索想
			//节流函数
			// var timeout
			// var	startTime = new Date();
			// var curTime
			// var mustRun=1000
			// if(mustRun){
			// 	curTime = new Date();
			// 	clearTimeout(timeout);
			// 		console.log("我还没有到时间1")
			// 	// 如果达到了规定的触发时间间隔，触发 handler
			// 	if(curTime - startTime >= mustRun){
			// 		console.log("我还没有到时间2")
			// 		startTime = curTime;
			// 	// 没达到触发间隔，重新设定定时器
			// 	}else{
			// 		clearTimeout(timeout);
			// 		timeout = setTimeout(()=>{
			// 				console.log("我还没有到时间33")
			// 			if(e.target.value===""){
			// 				this.listArr=this.setDoems
			// 				this.ischooke=-1
			// 				return 
			// 			}
			// 			let searchArr =this.setDoems.filter(function(val){
			// 				let filterValue = e.target.value.toLowerCase();
			// 				if(val.author){
			// 						var newName = val.author.toLowerCase();
			// 						return newName.indexOf(filterValue) != -1 
			// 						|| val.title.indexOf(filterValue) != -1 
			// 						|| val.author.indexOf(filterValue) != -1 
			// 				}
			// 			})
			// 			this.listArr=searchArr
			// 		},2000);
			// 	}
			//  }
			

			
		
			// 防抖动函数 1秒一次
			clearTimeout(this.timer)
			this.timer=setTimeout(()=>{
				console.log("pppp99 1000/60")
			if(e.target.value===""){
				this.listArr=this.setDoems
				this.ischooke=-1
				return 
			}
      let searchArr =this.setDoems.filter(function(val){
				let filterValue = e.target.value.toLowerCase();
				 if(val.author){
						var newName = val.author.toLowerCase();
						return newName.indexOf(filterValue) != -1 
						|| val.title.indexOf(filterValue) != -1 
						|| val.author.indexOf(filterValue) != -1 
				 }
			})
			this.listArr=searchArr
			},100000/100)
			
		},
		btnchooke(item){//添加选中样式
			if(this.pulltype!=0){
				return  item.isfalt?"like-span":""
			}
		},
		getName(data,type){
			if(data){
				if(type){
					return `${data.album}-${data.title}-${data.author}`
				}else{
					return `${data.album}${data.title}${data.author}`
				}
			}else{
				return "-"
			}
		},
		btnListArry(item,index){//点击事件
			item.isfalt=!item.isfalt
			if(!this.pulltype){
				this.radionSize={}
				this._sinGleOne(item,index)
			}
			else if(this.pulltype==1){
				this._valuAtionTwo(item)
			}
		},
		btnpull(e){//显示弹窗
			this._revealSpring(this.isbook,this.pulltype)
		},
		clickEvent(e){//关闭弹窗
			this.isshow=false
			
		},
	  sizeOnff(data,type){//未选中赋值
			if(data){
				if(!type){
					return data
				}
			}else{return "-"}
		},
		delUser(data){//删除自己所选择的数据 多选
			this._deltteTop(data)
		},
		canOff(){//多选取消
			this.setMultiterm=[]
			this.clickEvent()
			this.$emit("canOffBack");
		},
		conFirm(){//多选确定
			this.clickEvent()
			let obj={pulltype:this.pulltype,data:this.setMultiterm}
			this.$emit("conFirmBack",obj);
		},
 		_revealSpring(data,type){//显示弹窗
			if(data){
				let deom=[...this.setDatas]
				deom.forEach((element,index) => {element.isfalt=false});
				this.setDoems=this._defaultTwo(this.pulltype,deom)
				this.isshow=true
			}
		},
		_defaultTwo(type,deom){//多选框一进来选中
			if(type==1&&this.setMultiterm.length){
				this.setMultiterm.forEach((item,index)=>{
					deom.forEach((it,ix)=>{
						if(item.mid==it.mid){
							it.isfalt=true
							index--
						}
					})
				})
			}
			return deom
		},
		_deltteTop(data){//多选删除
			let that=this	
			this.setMultiterm.forEach((item,index)=>{
				if(item.mid==data){
					for (var i = 0;i<that.listArr.length; i++) {
						if(that.listArr[i].mid==data){
							that.listArr[i].isfalt=false
							break
						}
					}
					this.setMultiterm.splice(index,1)
					return
				}		
			})
		},
		_sinGleOne(item,index){//单选复制
			let obj={index,pulltype:this.pulltype,data:item}
			this.radionSize=`${item.album}-${item.title}-${item.author}`
			this.$emit("updateEvent", obj);
			this.isshow=false
		},
		_valuAtionTwo(item){//pulltype 多选赋值
			let _this =this;
			let setleng=this.setMultiterm
			if(setleng&&setleng.length){
				for (var i = 0;i<setleng.length; i++) {
					if(setleng[i].mid==item.mid&&!item.isfalt){
						setleng.splice(i,1)
						return 
					}
				}
				setleng.push(item)
			}else{setleng.push(item)}
			return setleng
		},
		_getwidth(){//获取元素宽度
			if(this.isbook){
				// let div= this.$refs.elememt2
				let div=document.getElementById("elememt")
				let sl= div.clientWidth || div.offsetWidth;
				return  `width:${sl}px`
			}
		}
	},
	computed:{
		...mapState({
			  textData:state => state.deonjs.textData
		})
	},
	watch:{
		"setDoems"(val){
      this.listArr=val
		}
	},
	components:{

  }
	
}

</script>

<style lang="scss" scoped >
.textdeom{
	position: relative;
	width: 100%;
	min-height: 30px;
	display: flex;
	flex-direction: column;
	.textdeom-flex1{
		position: fixed;
    top: 5px;
    left: 0;
    z-index: 1001;
    background: #fff;
		// min-width: 280px;
		// height: auto;
		.textdeom-isbook{
			font-size: 12px;
			overflow: hidden;
			height:30px;
			line-height: 30px;
			display: flex;
			>div{
				flex: 1;
			}
			>.textdeom-isbook-multiterm{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				flex: 1;
				height: 30px;
				line-height: 30px;
				overflow: hidden;
				flex-wrap: wrap;
				>li{
					border: 1px solid #333;
					border-radius:5px;
					margin-right:5px;
					height: 24px;
					line-height: 24px;
					margin-top:2px;
					margin-bottom:4px;
					overflow: hidden;
					flex-wrap: wrap;
					cursor: pointer;
					>p{
						span{
							font-size: 12px;
							padding-left:3px;
							cursor: pointer;
						}
						a{
							padding: 3px  0 3px 3px; 
							font-size:12px;
							cursor: pointer;
							
						}
					}
				}
			}
			.textdeom-isbook-spanimg{
				width: 14px;
				height: 14px;
				margin-top: 5px;
				background: url("./img/pull-lower.png") no-repeat right center;
				background-size:cover;
			}
		}
		.vdrop-commen{
				display: flex;
				height: auto;
				width: 100%;
				background:salmon; 
				background-size:cover;
				.vdrop-commen-title{
					display: flex;
					justify-content:flex-start;
					align-content: center;
					flex-direction: row;
					width: 100%;
					position: relative;
					z-index: 1001;
					.vdrop-commen-timg{
						width: 16px;
						height: 16px;
						margin-top: 7px;
						background: url("./img/search.png") no-repeat right center;
						background-size:cover;
					}
					.vdrop-commen-size{
						flex: 1;
						padding-right: 8px;
						.search-input {
								width: 100%;
								height: 20px;
								padding: 3px 0;
								text-indent: 8px;
								text-align: left;
								color: #000;
								// background: #f9f9f9 url("./img/search_sm.png") no-repeat scroll right center;
								margin: 0;
						}
					}
				}
				.vdrop-commen-selexs{
					display: flex;
					flex-direction:column;
					justify-content: flex-start;
					align-items: center;
					flex: 1;
					width: 100%;
					height: 300px;
					max-height: 300px;
					background-color: #e5e5e5;;
					position: absolute;
					top:63px;
					left: 0;
					z-index: 1001;
					background:salmon;
					background-size:cover;
					cursor: pointer;
					.vdrop-commen-ultop{
						flex: 1;
						width: 100%;
						overflow-y: scroll;
						.vdrop-commen-lengh{
							font-size: 14px;
							color: #000;
							margin-top: 10px;
							text-align: center;
						}
						li{
							border-bottom:1px solid #fff;
							font-size: 14px;
							height: 20px;
							line-height: 20px;
							overflow: hidden;
							padding-left: 5px;
							min-width: 200px;
							&:hover{
								background: #000;
								color: #fff;
							}
							span{
								display:inline-block;
								width: 14px;
								height: 14px;
								background: url(./img/no.png) no-repeat right center;
								background-size:cover;
								margin: 3px 3px 0 0;
								&.like-span{
									background: url(./img/yes.png) no-repeat right center;
									background-size:cover;
								} 
							}
						}
					}
					.vdrop-commen-bot{
						width: 100%;
						height: 34px;
						background: burlywood;
						display: flex;
						justify-content: space-around;
						align-items: center;
						li{
							display: block;
							width: 50px;
							height: 24px;
							text-align: center;
							font-size: 12px;
							line-height: 24px;
							&.vdrop-commen-bot-sp1{
								border: 1px solid royalblue;
							}
							&.vdrop-commen-bot-sp2{
								border: 1px solid #fff;
							}
						}
					}
				}
		}
		
	}
	.vdrop-clone{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background:rgba(0,0,0,0.2);
		z-index: 1000;
	}
}
</style>
